<!DOCTYPE html>
<html>
<!-- 用传统jquery的方法操作DOM实现 “注册账号” 需求 -->
<meta charset="utf-8">
<title>用传统jquery的方法操作DOM实现 “注册账号” 需求</title>

<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div id="step1">
        <input placeholder="请输入手机号">
        <button id="commitPhoneNum">提交手机号</button>
    </div>
    <div id="step2">
        <input placeholder="输入验证码">
        <button id="getNum">获取验证码</button>
    </div>

    <div id="step3">
        <input placeholder="设置密码">
        <button id="stepOK">完成</button>
    </div>

    <p>OK</p>

    <script>
        // jquery 操作 DOM 元素来控制 标签的显示与否
        $("p").hide();
        $("#step2").hide();
        $("#step3").hide();

        // $("#commitPhoneNum") 是找到 id = commitPhoneNum 的元素，给该元素绑定click触发函数是 commitPhoneNum

        //    提交手机号
        $("#commitPhoneNum").bind("click", commitPhoneNum);
        function commitPhoneNum() {
            console.log(' 我点击了 commitPhoneNum');
            $("#step1").hide(); //fadeOut()/fadeIn() 淡入淡出
            $("#step2").show();//hide()/show()无动画
        }
        // 获取验证码
        $("#getNum").bind("click", getNum);
        function getNum() {
            console.log('getNum');
            $("#step2").hide();
            $("#step3").show();
        }
        // 完成
        $("#stepOK").bind("click", finish);
        function finish() {
            $("#step3").hide();
            $("p").show();
        }
    </script>
</body>

</html>